<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI角色对话</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入Chart.js用于数据可视化 -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- 配置Tailwind自定义颜色和字体 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4F46E5',
            secondary: '#10B981',
            accent: '#8B5CF6',
            neutral: {
              100: '#F3F4F6',
              200: '#E5E7EB',
              300: '#D1D5DB',
              400: '#9CA3AF',
              500: '#6B7280',
              600: '#4B5563',
              700: '#374151',
              800: '#1F2937',
              900: '#111827'
            },
            magic: {
              blue: '#00A3FF',
              green: '#00FF9D',
              purple: '#BF00FF'
            }
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
            display: ['Montserrat', 'sans-serif']
          },
          animation: {
            'float': 'float 6s ease-in-out infinite',
            'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
            'glow': 'glow 2s ease-in-out infinite alternate'
          },
          keyframes: {
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-10px)' }
            },
            glow: {
              '0%': { boxShadow: '0 0 5px rgba(0, 163, 255, 0.5), 0 0 10px rgba(0, 163, 255, 0.3)' },
              '100%': { boxShadow: '0 0 10px rgba(0, 163, 255, 0.8), 0 0 20px rgba(0, 163, 255, 0.6), 0 0 30px rgba(0, 163, 255, 0.4)' }
            }
          }
        }
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      }
      .text-shadow-glow {
        text-shadow: 0 0 10px rgba(0, 163, 255, 0.8);
      }
      .glass {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
      }
      .glass-dark {
        background: rgba(17, 24, 39, 0.7);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      .magic-border {
        border: 1px solid;
        border-image: linear-gradient(45deg, #00A3FF, #00FF9D, #BF00FF) 1;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .bg-gradient-custom {
        background: linear-gradient(135deg, #111827 0%, #1F2937 100%);
      }
    }
  </style>
  
  <style>
    body {
      overflow-x: hidden;
      background-color: #111827;
    }
    
    /* 魔法效果 */
    .magic-hover {
      transition: all 0.3s ease;
    }
    
    .magic-hover:hover {
      transform: translateY(-5px);
    }
    
    /* 3D旋转平台效果 */
    .platform {
      perspective: 1000px;
    }
    
    .platform-inner {
      transform-style: preserve-3d;
      transition: transform 0.5s ease;
    }
    
    .platform:hover .platform-inner {
      transform: rotateY(10deg);
    }
    
    /* 渐变文字 */
    .gradient-text {
      background: linear-gradient(45deg, #00A3FF, #00FF9D, #BF00FF);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      background-size: 200% 200%;
      animation: gradientShift 5s ease infinite;
    }
    
    @keyframes gradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    
    /* 魔法粒子效果 */
    .magic-particles {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 0;
    }
  </style>
</head>
<body class="bg-gradient-custom text-gray-100 min-h-screen">
  <!-- 魔法粒子背景容器 -->
  <div class="magic-particles" id="particles"></div>
  
  <!-- 主应用容器 -->
  <div id="app"></div>
  <script type="module" src="/front/backai/main.js"></script>
</body>
</html>